<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="css/reg.css">
    <link rel="stylesheet" href="css/normalize.css">
</head>

<body>
    <nav>
        <div class="nav-con">
            <div class="logo">
                <img src="images/HUAWEI.svg" alt="">
            </div>
            <p>华为商城</p>
        </div>
    </nav>
    <div class="main">
        <aside>
            <div>
                <span></span>
                <b>账号注册</b>
            </div>
            <div>
                <span></span>
                <b>邮箱地址注册</b>
            </div>
        </aside>
        <div class="form">
            <p>华为帐号注册</p>
            <p>已有帐号，<a href="login.html">去登陆&gt;</a></p>
            <div class="country">
                <span>国家/地区</span>
                <span>中国v</span>
            </div>
            <div class="phone">
                <span>+86(中国)V</span>
                <input type="text" placeholder="帐户名称" id="username">
            </div>
            <!-- <div class="ma">
                <input type="text" placeholder="短信验证码">
                <span>获取验证码</span>
            </div> -->
            <div class="pwd">
                <input type="text" placeholder="密码" id="userpass">
                <span></span>
            </div>
            <div class="repwd">
                <input type="text" placeholder="确认密码">
                <span></span>
            </div>
            <!-- <div class="date">
                <span>出生日期</span>
                <span>2022年V</span>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <span>2月V</span>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <span>18日V</span>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <i></i>
            </div> -->
            <input id="btnReg" type="button" value="注册 ">
            <div id="messageBox">

            </div>
        </div>
    </div>
    <footer>
        <ul>
            <li>华为帐号用户协议 </li>
            <li>关于华为帐号与隐私的声明</li>
            <li>常见问题</li>
            <li>Cookies</li>
        </ul>
        <p>华为帐号 版权所有 © 2011-2022</p>
    </footer>
</body>

</html>
<script type="text/javascript " src="js/jQuery.js "></script>
<script>
    function isTest() {
        return isUserName() && isPass();
    }

    //1、用户名的前端验证
    function isUserName() {
        //1)、非空判断
        if ($("#username").val() == "") {
            return false;
        }
        //2)、格式判断
        // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
        let reg = /^[a-zA-Z_]\w{1,9}$/;
        if (!reg.test($("#username").val())) {
            return false;
        }
        return true;
    }


    //2、密码的前端验证
    function isPass() {
        //1)、非空判断
        if ($("#userpass").val() == "") {
            return false;
        }
        //2)、格式判断
        // 数字，6-16位
        let reg = /^\d{6,16}$/;
        if (!reg.test($("#userpass").val())) {
            return false;
        }
        return true;
    }

    //二、后端验证
    let hasUser = false; //该用户名不存在
    function hasUserBack() {
        //后端验证用户名是否存在
        $.get("php/checkUser.php", {
            "username": $("#username").val()
        }, function(data) {
            // console.log(data);
            if (data == 0) {
                $("#messageBox").html("亲，该用户名已经存在，请重新思考！");
                $("#messageBox").css({
                    "color": "red"
                });
                hasUser = true;
            } else {
                $("#messageBox").html("亲，该用户名可以使用，赶紧注册吧！");
                $("#messageBox").css({
                    "color": "green"
                });
                hasUser = false;
            }

            // console.log(data)
        })
    }

    $(function() {
        $("#username").blur(function() {
            //1、前端验证
            if (isUserName() == false) {
                $("#messageBox").html("亲，用户名的格式不正确！");
                return;
            }
            //2、后端的验证
            hasUserBack();
        });

        $("#userpass").blur(function() {
            //1、前端验证
            if (isPass() == false) {
                $("#messageBox").html("亲，密码格式不正确	！");
                return;
            } else {
                $("#messageBox").html("√");
            }
        });

        $("#btnReg").click(function() {
            //1、前端验证
            if (isTest() == false) {
                $("#messageBox").html("亲，您的信息输入不全");
                return;
            }
            //2、用户名是否存在(后端验证)
            if (hasUser) {
                return;
            }

            $.post("php/addUser.php", {
                    "username": $("#username").val(),
                    "userpass": $("#userpass").val()
                },
                function(data) {
                    // console.log(data);
                    if (data == 1) {
                        $("#messageBox").css({
                            "color": "green"
                        });
                        $("#messageBox").html("恭喜您，注册成功！2秒后跳转到登录页面");
                        setTimeout(() => {
                            location.href = "login.html";
                        }, 2000);
                    } else if (data == 0) {
                        $("#messageBox").css({
                            "color": "red"
                        });
                        $("#messageBox").html("不好意思，注册失败!");
                    } else {
                        $("#messageBox").css({
                            "color": "red"
                        });
                        $("#messageBox").html("不好意思，服务器出问题了!");
                    }
                    // console.log(data)
                }
            );
        });
    });
</script>